{extend name="public/base"/}
{block name="body"}
<style>
.mui-table-view-cell p {
    margin-bottom: 0;
    font-size: 12px;
}
.mui-table-view .mui-media-object {
    line-height: 42px;
    max-width: 60px;
    height: 60px;
}
.mui-card-header {
    font-size: 14px;
    border-radius: 2px 2px 0 0;
        padding: 5px 10px;
}
.mui-h5, h5 {
     font-size: 12px;
    font-weight: 400;
    color: #8f8f94;
}
</style>

	<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/webuploader-0.1.5/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader-0.1.5/webuploader.js"></script>

<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">订单详情</h1>
</header>
<div class="mui-content">
<div class="mui-card" >
    <div class="mui-card-header ">
        <div class="mui-ellipsis mui-col-xs-8" id="bhorderid">订单编号：{$orderInfo.id}</div>
        <input type="hidden" id="testInput" name="test" value="{$orderInfo.id}"/>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        {volist name="orderInfo.OrderShoplist" id="vo"}
          <li class="mui-table-view-cell">
              <div class="mui-table"  style="font-size:12px;">
                  <div class="mui-table-cell mui-col-xs-8">
                      {$vo.good_name}
                      ({$vo.rule_name})
                  </div>
                  <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                      <span class="mui-h5">x{$vo.num}</span>
                  </div>
                  <div class="mui-table-cell mui-col-xs-4 mui-text-right">
                      <span class="mui-h5">¥{$vo.num*$vo.price}</span>
                  </div>
              </div>
          </li>
        {/volist}

        <li class="mui-table-view-cell">
            <div class="mui-table"  style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-12">
                    商品总额:¥{$orderInfo.shop_price} <br />运费:¥{$orderInfo.freight} 运费补贴:¥{$orderInfo.subsidy} 优惠券:¥{$orderInfo.coupon_id|get_table_field="id","price","CouponList"} 余额:¥{$orderInfo.balance}
                    <br />实付：¥{$orderInfo.pay_price}
                </div>
            </div>
        </li>
    </ul>
</div>





<div class="mui-card" >
    <div class="mui-card-header ">
        <div class="mui-ellipsis mui-col-xs-8">订单图片</div>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        
          <li class="mui-table-view-cell">
            
            <div>
<div id="thelist" class="mui-media-object mui-pull-left"></div>
   	  	
 <div class="btns col-sm-2">
  <div class="picker">选择文件</div>
  <button id="ctlBtn" class="btn default-btn" data-bhid="{$orderInfo.id}" >开始上传</button>
 </div>
</div>
          </li>
      

        <li class="mui-table-view-cell">
           <li class="mui-table-view-cell mui-media">
            		

   <img class="mui-media-object mui-pull-left" src="{$orderInfo['cover_id']|get_cover='path','400x218'}" data-preview-src="" data-preview-group="{$orderInfo['id']}">
  <img class="mui-media-object mui-pull-left" src="{$orderInfo['ddimage']|get_cover='path','400x218'}" data-preview-src="" data-preview-group="{$orderInfo['ddimage']}">
</li>
        </li>
    </ul>
</div>



<div class="mui-card">
    <div class="mui-card-header ">
        <div class="mui-ellipsis mui-col-xs-8">配送信息</div>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    收货人
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.user_name}
                    </span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    配送地址
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.address}
                    </span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    联系电话
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.tel}
                    </span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    指定配送时间
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.group_time}{$orderInfo.deliverytime}
                    </span>
                </div>
            </div>
        </li>
        {in name="orderInfo.buystatus" value="3,4"}
          <li class="mui-table-view-cell">
              <div class="mui-table" style="font-size:12px;">
                  <div class="mui-table-cell mui-col-xs-4">
                      配送师傅
                  </div>
                  <div class="mui-table-cell mui-col-xs-8 ">
                      <span class="mui-h5">
                        {$orderInfo.allot_person|get_table_field="id",'name','DeliveryPerson'}
                      </span>
                  </div>
              </div>
          </li>
          <li class="mui-table-view-cell">
              <div class="mui-table" style="font-size:12px;">
                  <div class="mui-table-cell mui-col-xs-4">
                      师傅电话
                  </div>
                  <div class="mui-table-cell mui-col-xs-8 ">
                      <span class="mui-h5">
                        {$orderInfo.allot_person|get_table_field="id",'tel','DeliveryPerson'}
                      </span>
                  </div>
              </div>
          </li>
        {/in}
    </ul>

    <script src="__PUBLIC__/xsd/js/clipboard.min.js"></script>
    <textarea id="foo"  style="     height: 10px;  margin-left: -1000px;margin-bottom: 0;" >
      &#13订单号：{$orderInfo.id}
      {volist name="orderInfo.OrderShoplist" id="vo"}
      &#13商品：{$vo.good_name}&#13规格：({$vo.rule_name})&#13数量:{$vo.num}份 
      {/volist}
      &#13收货人：{$orderInfo.user_name}
      &#13收货电话：{$orderInfo.tel}
      &#13配送地址:{$orderInfo.address}
      &#13备注信息：{$orderInfo['remark']}
    
    </textarea>
     <textarea id="foo2"  style="     height: 10px;  margin-left: -1000px;margin-bottom: 0;"  >
      &#13订单号：{$orderInfo.id}
      {volist name="orderInfo.OrderShoplist" id="vo"}
      &#13商品：{$vo.good_name}&#13规格：({$vo.rule_name})&#13数量:{$vo.num}份
      {/volist}
      &#13发货人：{$orderInfo.user_name}
      &#13发货人电话：{$orderInfo.tel}
      &#13收货人信息：{$orderInfo['remark']}
    
    </textarea>
<!--   发货人：{$orderInfo.nickname} 电话：{$orderInfo.mobile}-->
<!--{if condition="mb_strlen($orderInfo['remark'],'utf-8') egt 40"} {/if}-->

    <button class="btn " data-clipboard-target="#foo" aria-label="复制成功！" style="margin: 0 auto;display: block;">复制配送信息</button><br />
  
    <button class="btn " data-clipboard-target="#foo2" aria-label="复制成功！" style="margin: 0 auto;display: block;">简易复制</button><br />
  
    <script>
    //new Clipboard('.btn');
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
    	var msg = e.trigger.getAttribute('aria-label');
      console.log(e);
    	alert(msg);

        e.clearSelection();
    });
    </script>
</div>


<div class="mui-card" >
    <div class="mui-card-header ">
        <div class="mui-ellipsis mui-col-xs-8">订单信息</div>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
    	 <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4" style="    display: table-caption;">
                配送信息（本人下单的配送信息）
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">

                    <textarea name="remark" id="remark" data-id="{$orderInfo.id}" >收货人：{$orderInfo.user_name}配送地址：{$orderInfo.address} 联系电话：{$orderInfo.tel}</textarea>
                  </span>
                 
              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  订单编号
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo.out_trade_no}
                  </span>
              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  下单时间
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo.create_time}
                  </span>
              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  支付方式
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo['pay']|parse_config_value='pay'}
                  </span>
              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  送货方式
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo['way']|parse_config_value='distribution'}
                  </span>
                  {eq name="$orderInfo.way" value="2"}
                  <p>自提地点：{$orderInfo['zt_address']}</p>
                  <p>站长电话：{$orderInfo['zt_address']|get_table_field="name","phone","delivery_arayacak"}</p>
                  {/eq}

              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4" style="    display: table-caption;">
                  备注信息
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
              	<a href="javascript:;" data-toggle="modal" data-target="#myModal2" data-id="{$orderInfo['id']}"  data-remark="{$orderInfo['remark']}">
                  <span class="mui-h5">

                    <textarea name="fhremark" id="fhremark" data-id="{$orderInfo.id}" >{$orderInfo['remark']}</textarea>
                  </span>
               </a>   
                  
                  {eq name="$fhuser_id" value='4704'}
                  <button class="btn "  style="margin: 0 auto;display: block;" onclick="hideDeliveryTime()">
                  	修改备注
                  	</button><br />
                  {/eq}
              </div>
          </div>
      </li>
    </ul>
</div>



</div>
<div class="modal fade "  id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">备注修改</h4>
            </div>
						<form class="form-horizontal2" action="{:url('index/order/updateremark')}" method="post">
	            <div class="modal-body">
	              
								<div>
									<span>备注信息：</span>
									<textarea name="modalremark" rows="4" class="form-control"></textarea>
								</div>
													<input type="hidden" name="id" value="">
	            </div>
	            <div class="modal-footer">
	              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	              <button type="submit" class="btn btn-primary submit-btn ajax-post"  target-form="form-horizontal2">确定</button>
	            </div>
						</form>
          </div>
        </div>
      </div>
			<script>
			 $(function(){
				 $('#myModal2').on('show.bs.modal', function (e) {
				 	
						var id = $(e.relatedTarget.outerHTML).attr('data-id');
						var remark =   $("#fhremark").val();
						$(e.target).find('[name="id"]').val(id);
						$(e.target).find('[name="modalremark"]').val(remark);
						
						
				 })
			 })
			</script>

</div>






{/block}
{block name="script"}
<script>
  mui.init({
    swipeBack:true //启用右滑关闭功能
  });
  $('#scroll').height($(window).height()-44)

   function hideDeliveryTime() {
        var val =   $("#remark").val();
      var orderid =  $("#testInput").val();
     alert(orderid);
      $.post("{:url('index/order/qteditOrderInfo')}", {'id': orderid, 'remark': val}, function(data) {
        mui.toast(data.msg)
      }, "json");
    }
function callpay()

	{
		alert("aa");
	  var val =   $("#remark").val()
      var orderid =  $(this).attr('data-id');
      $.post("{:url('index/order/qteditOrderInfo')}", {'id': orderid, 'remark': val}, function(data) {
        mui.toast(data.msg)
      }, "json");
	}
</script>

<script type="text/javascript">
  $(function(){
  	
  	
  
  	//var ddbhid =  $(e.relatedTarget.outerHTML).attr('data-bhid');
  	
  	var ddbhid= $("#ctlBtn").attr("data-bhid");
  	

  	   $("#ctlBtn").click(function(){
  
    uploader.upload();
   })
 
 
   var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: false,
    // 文件接收服务端。
     server: '/index/goodshops/testimage?ddbhid='+ddbhid,
     // 选择文件的按钮。可选。
     // 内部根据当前运行是创建，可能是input元素，也可能是flash.
     pick: '.picker',
     // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
     resize: false,
     // 只允许选择图片文件。
     accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
     },
     /* fileSizeLimit :10, //验证文件总大小是否超出限制, 超出则不允许加入队列
     fileSingleSizeLimit :10,   //验证单个文件大小是否超出限制, 超出则不允许加入队列。 */
     duplicate :true //去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
 
    });
 
 
  // 当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。
   uploader.on( 'beforeFileQueued', function( file ) {
    // 限制图片数量
    img_length = $("#thelist img").length;
    if (img_length >= 1) {
    layer.msg("图片最多上传1张");
    return false;
    }
 
   });
 
  // 当有文件添加进来的时候
   uploader.on( 'fileQueued', function( file ) {
   var $li = $(
      '<div id="' + file.id + '" class="file-item thumbnail col-sm-3" style="width:60px;margin-left:10px;">' +
       '<img>' +      
      '</div>'
      ),
     $img = $li.find('img');
    // $list为容器jQuery实例
    $("#thelist").append( $li );
    
    
    
    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
     if ( error ) {
      $img.replaceWith('<span>不能预览</span>');
      return;
     }
     $img.attr( 'src', src );
    }, 150, 150 );
 
   });
 
  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
   uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).addClass('upload-state-done');
    var $li = $( '#'+file.id ),
     $done = $li.find('div.upload-state-done');
    // 避免重复创建
    if ( !$done.length ) {
    $done = $('<div class=""></div>').appendTo( $li );
    }
    $done.html('<font color="blue">上传成功</font>');
   });
 
  // 文件上传失败，显示上传出错。
   uploader.on( 'uploadError', function( file ) {
    var $li = $( '#'+file.id ),
     $error = $li.find('div.error');
    // 避免重复创建
    if ( !$error.length ) {
     $error = $('<div class="error"></div>').appendTo( $li );
    }
    $error.html('<font color="red">上传失败</font>');
   });
 

  })
 
  function deleteFile(obj) {
   $(obj).parent().remove();
  }
</script>
{/block}
